<template>
  <div class="search">
    <Card>
      <Row>
        <Form
          ref="editForm"
          :model="editForm"
          :rules="rules"
          style="width: 100%"
          :label-width="120"
        >
          <FormItem label="合作伙伴名称" prop="partnerName">
            <Input
              v-model="editForm.partnerName"
              placeholder="请输入合作伙伴名称"
              @on-change="() => valideReText('partnerName')"
              style="width: 40%"
            />
          </FormItem>
          <FormItem label="logo图片" prop="partnerPic">
            <Upload
              action
              type="drag"
              ref="upload"
              :max-size="2 * 1024"
              :show-upload-list="false"
              :before-upload="beforeUpload"
              :format="['jpg', 'jpeg', 'png']"
              style="display: inline-block; height: 150px"
            >
              <img v-if="editForm.partnerPic" :src="editForm.partnerPic" height="150" />
              <div v-else style="width: 150px; height: 150px; line-height: 150px">
                <Icon type="md-add" size="20" />
              </div>
            </Upload>
            <span style="margin-left: 20px; color: #aaa"
              >只能上传jpg/png文件，不超过2MB，支持上传1张</span
            >
          </FormItem>
          <FormItem label="联系人" prop="partnerContact">
            <Input
              v-model="editForm.partnerContact"
              @on-change="() => valideReText('partnerContact')"
              placeholder="请输入联系人"
              :maxlength="10"
              style="width: 40%"
            />
          </FormItem>
          <FormItem label="联系电话" prop="partnerPhone">
            <Input
              v-model="editForm.partnerPhone"
              placeholder="请输入联系电话"
              :maxlength="15"
              style="width: 40%"
            />
          </FormItem>
          <FormItem label="合作伙伴介绍" prop="partnerDesc">
            <Editor style="max-width: 800px" :richText.sync="editForm.partnerDesc" :defaultText="defaultText" />
          </FormItem>
          <div>
            <Button type="text" @click="toback">返回</Button>
            <Button type="primary" @click="submitForm">保存</Button>
          </div>
        </Form>
      </Row>
    </Card>
  </div>
</template>

<script>
import * as API_Pather from "@/api/pather.js";
import Editor from '@/components/editor/WEditor.vue';

export default {
  name: "member",
  components: {
    Editor,
  },
  data() {
    return {
      defaultText:"",
      editForm: {}, // 表单
      rules: {
        // 验证规则
        partnerName: [{ required: true, message: "请输入合作伙伴名称" }],
        partnerPic: [{ required: true, message: "请上传合作伙伴LOGO" }],
        partnerContact: [{ required: true, message: "请输入联系人" }],
        partnerPhone: [{ required: true, message: "请输入联系电话" }],
        partnerDesc: [{ required: true, message: "请输入合作伙伴介绍" }],
      },
    };
  },
  mounted() {
    let id = this.$route.query.id;
    this.init(id);
  },
  methods: {
    // 返回上级
    toback() {
      this.$store.commit("removeTag", "pather-form");
      this.$router.go(-1);
    },
    // 置空表情
    valideReText(value) {
      let reg = /\ud83c[\udf00-\udfff]|\ud83d[\udc00-\ude4f]|\ud83d[\ude80-\udeff]/gi;
      this.editForm[value] = this.editForm[value].replace(reg, "");
    },
    // 初始化数据
    init(id) {
      let form = {
        id: null,
        partnerPic: null, // 合作伙伴LOGO
        partnerName: null, // 合作伙伴名称
        partnerContact: null, // 联系人
        partnerPhone: null, // 联系电话
        partnerDesc: null, // 合作伙伴介绍
      };
      if (id) {
        API_Pather.getPatherDetail(id).then((res) => {
          if (res.success) {
            form = {
              id: res.result.id,
              partnerPic: res.result.partnerPic,
              partnerName: res.result.partnerName,
              partnerContact: res.result.partnerContact,
              partnerPhone: res.result.partnerPhone,
              partnerDesc: res.result.partnerDesc,
            };
            this.editForm = Object.assign({}, form);
            this.$nextTick(()=>{
              this.defaultText=this.editForm.partnerDesc
            })
          }
        });
      } else {
        this.editForm = Object.assign({}, form);
      }
      this.$refs.editForm.resetFields();
    },
    // 自定义上传
    beforeUpload(file) {
      let typeList = [".jpg", ".jpeg", ".png"];
      if (!typeList.some((i) => file.name.lastIndexOf(i) != -1)) {
        this.$Message.warning("请检查上传文件格式");
        return;
      }
      if (file.size / 1024 > 2 * 1024) {
        this.$Message.warning("图片大小不能超过2MB");
        return;
      }
      const formData = new FormData();
      formData.append("file", file);
      API_Pather.postUpload(formData).then((res) => {
        if (res.success) {
          this.editForm.partnerPic = res.result;
          this.$refs.editForm.validateField("partnerPic");
        }
      });
      return false;
    },
    //提交
    submitForm() {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          let text = this.replaceHTML(this.editForm.partnerDesc);
          if (text && text.length > 10000) {
            this.$Message.warning(`当前字数为${text.length}字，字数不能超过10000字`);
            return;
          }
          if (this.editForm.id) {
            API_Pather.putUpdatePather(this.editForm).then((res) => {
              if (res.success) {
                this.$Message.success("修改成功");
                this.toback();
              }
            });
          } else {
            API_Pather.postAddPather(this.editForm).then((res) => {
              if (res.success) {
                this.$Message.success("添加成功");
                this.toback();
              }
            });
          }
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.type-item {
  user-select: none;
  display: inline-block;
  padding: 0 15px;
  border: 1px solid transparent;
  border-radius: 4px;
  margin-right: 5px;
  background-color: #f5f5f5;
  &:hover {
    cursor: pointer;
    color: #20dfdf;
    border: 1px solid #89ffff;
    background-color: #f3fdfc;
  }
}
.typeCheck {
  color: #20dfdf;
  border: 1px solid #71fdfd;
  background-color: #e2ffff;
}
</style>
